<template>
  <a-modal
    :visible="visible"
    :title="editId ? '学分要求信息修改' : '学分要求信息录入'"
    :confirmLoading="confirmLoading"
    okText='保存'
    :width="1000"
    @cancel="() => { $emit('cancel') }"
    @ok="() => { $emit('create') }"
  >
    <a-form :form="form" class="credit-form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="培养模式"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['pymsm',
              {
                rules: [{ required: true, message: '请选择培养模式!' }],
              }
            ]">
              <a-select-option v-for="i in selectMenu.pyms" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item
            label="学生类别"
            :labelCol="{span: 7,offset: 1}"
            :wrapperCol="{span: 15, offset: 1}"
          >
            <a-select v-decorator="['xslbm',
              {
                rules: [{ required: true, message: '请选择学生类别!' }]
              }
            ]" @change="xslbChange">
              <a-select-option v-for="i in selectMenu.xslb" :key="i.id" :value="i.code">{{ i.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="credit-input-wrap">
        <a-col :span="3" class="credit-big-cate">{{ creditCate }}</a-col>
        <a-col :span="2">
          <div class="half-height-block">课程</div>
          <div class="half-height-block">论文</div>
        </a-col>
        <a-col :span="6">
          <div class="half-height-block">
            <a-form-item
              label="必修课学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['bxkxf']"></a-input>
            </a-form-item>
            <a-form-item
              label="选修课学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['xxkxf']"></a-input>
            </a-form-item>
            <a-form-item
              label="学位课学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['xwkxf']"></a-input>
            </a-form-item>
            <a-form-item
              label="实践环节学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['sjhjxf']"></a-input>
            </a-form-item>
          </div>
          <div class="half-height-block">
            <a-form-item
              label="开题报告学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['ktbgxf']"></a-input>
            </a-form-item>
            <a-form-item
              label="中期考核学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['zqkhxf']"></a-input>
            </a-form-item>
            <a-form-item
              label="预答辩学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['ydbxf']"></a-input>
            </a-form-item>
            <a-form-item
              label="学位论文学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['xwlwxf']"></a-input>
            </a-form-item>
          </div>
        </a-col>
        <a-col :span="6">
          <div class="half-height-block">
            <a-form-item
              label="必修课门数"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['bxkms']"></a-input>
            </a-form-item>
            <a-form-item
              label="选修课门数"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['xxkms']"></a-input>
            </a-form-item>
            <a-form-item
              label="学位课门数"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['xwkms']"></a-input>
            </a-form-item>
            <a-form-item
              label="学术活动学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['xshdxf']"></a-input>
            </a-form-item>
          </div>
          <div class="half-height-block"></div>
        </a-col>
        <a-col :span="7">
          <div class="half-height-block">
            <a-form-item
              label="课程总学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['kczxf']"></a-input>
            </a-form-item>
          </div>
          <div class="half-height-block">
            <a-form-item
              label="论文研究总学分"
              :labelCol="{span: 10,offset: 1}"
              :wrapperCol="{span: 10, offset: 1}"
            >
              <a-input v-decorator="['lwyjzxf']"></a-input>
            </a-form-item>
          </div>
        </a-col>
      </a-row>
      <a-form-item label="备注" :labelCol="{span: 2}" :wrapperCol="{span: 21, offset: 1}">
        <a-input type="textarea" v-decorator="['note']" :autosize="{ minRows: 2, maxRows: 6 }"/>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
export default {
  props: ['visible', 'editId', 'selectMenu', 'confirmLoading'],
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  data () {
    return {
      creditCate: ''
    }
  },
  methods: {
    xslbChange (v) {
      let selectItem = this.selectMenu.xslb.find(i => {
        return i.code === v
      })
      this.creditCate = selectItem.name
    }
  }
}
</script>

<style lang="less" scoped>
.credit-input-wrap{
  display: flex;
  margin-bottom: 40px;
  .ant-form-item{
    margin-bottom: 0px !important;
  }
  .credit-big-cate{
    display:flex;
    align-items:center;
    justify-content: center;
    // margin: 5px;
    background-color: rgb(221, 248, 255);
  }
  .half-height-block{
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: rgb(221, 248, 255);
    // margin: 5px;
    justify-content: center;
  }
}
</style>
